<template>
	<div>
		<input type="text" v-model.number.lazy="a"/>
		+
		<input type="text" v-model.number.lazy="b"/>
		= {{ total }}
	</div>
	<div>
		<input type="text" v-model.number.lazy="a"/>
		+
		<input type="text" v-model.number.lazy="b"/>
		= {{ total }}
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
const a = ref(0)
const b = ref(0)
const sum = () => {
	console.log('计算a + b')
	return a.value + b.value
}
// 计算属性其实也是一个响应式数据（依赖其他响应式数据的）
// total是一个响应式数据，由a、b计算出来的
// 只要a和b中有一个变化了，total就会重新计算结果
// 好处：只会计算一次，可以被多次使用
const total = computed(() => {
	console.log('计算a + b')
	return a.value + b.value
})
</script>

<style scoped>
	
</style>